<script setup lang="ts">
import {PhoneFilled} from "@element-plus/icons-vue";
import {ref} from "vue";


// 打开遮罩
function showDrawer() {
    visible.value = true;
}
// 关闭遮罩
function onClose() {
    visible.value = false;
}
// 弹出电话
function isPhone() {
    window.location.href = 'tel:81669525';
}

let visible = ref(false)
</script>

<template>
 <div>
     <div class="box">
         <div class="text">
             <div type="primary" @click="showDrawer" class="textP">
                 危机干扰
             </div>
             <a-drawer
                 placement="bottom"
                 :closable="false"
                 :height="0+'%'"
                 :width="50+'%'"
                 :visible="visible"
                 @close="onClose"
                 :maskStyle="{
                 'animation':'none',
                 'height': '90%',
                 }"
             >
                 <p>Some contents...</p>
                 <el-button class="phone" @click="isPhone"><el-icon color="#1590FB"><PhoneFilled /></el-icon>&nbsp;81669525</el-button>
                 <button class="cancel" @click="onClose">取消</button>
             </a-drawer>
         </div>
     </div>
 </div>
</template>

<style scoped>
* {
    margin: 0;
    padding: 0;
}
.box {
    width: 16vw;
    height: 16vw;
    border-radius: 50%;
    background-color: #FF693B;
    .text {
        padding: 23% 24%;
        width: 100%;
        color: #fff;
        font-weight: 600;
        .textP {
            font-size: 4vw;
        }
    }
}
.cancel {
    position: absolute;
    bottom: 23vw;
    left: 6vw;
    width: 88%;
    height: 13vw;
    font-size: 4vw;
    background-color: #fff;
    border: none;
    border-radius: 10px;
}
.phone {
    position: absolute;
    bottom: 38vw;
    left: 6vw;
    width: 88%;
    height: 13vw;
    font-size: 4vw;
    background-color: #fff;
    border: none;
    border-radius: 10px;
}

</style>